<template>
  <div class="dingjin">
    <div class="yingfu">
      <span>应付金额：</span><span>￥{{ z_money }}元</span>
    </div>
    <van-radio-group v-model="radio">
      <ul class="fuzhang">
        <li>
          <img src="../../../assets/dingdanxinxi/kehuyue.jpg" alt="" />
          <span>{{ fukuan[0].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="账户余额"
            name="账户余额"
          ></van-radio>
        </li>
        <li>
          <img src="../../../assets/dingdanxinxi/zhifubao.jpg" alt="" />
          <span>{{ fukuan[1].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="支付宝"
            name="支付宝"
          ></van-radio>
        </li>
        <li>
          <img src="../../../assets/dingdanxinxi/weixin.jpg" alt="" />
          <span>{{ fukuan[2].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="微信"
            name="微信"
          ></van-radio>
        </li>
      </ul>
    </van-radio-group>
    <div class="tongyi_yuedu">
      <van-checkbox
        class="ckecked_tongyi_ground_btn"
        v-model="checked"
        shape="square"
      />
      <span>同意</span>
      <span>《平价分时租车租赁协议》</span>
    </div>
    <van-button
      :disabled="!checked"
      class="buton_botom"
      type="info"
      @click="fukuantotongzhi"
    >
      {{ radio }}
    </van-button>

    <div>
      <!-- 支付二维码 -->
      <el-dialog
              :title="qrTitle"
              :visible.sync="showQr"
              width="50%">
      <span>
        <vue-qr :text="payUrl" :size="200"></vue-qr>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { placeOrder,paymentOrder , alipay, getAliPayStatus, weixinpay, getWeiXinPayStatus } from "../../../request/userinfo/userinfo";
import { Notify } from 'vant';
import VueQr from 'vue-qr'
export default {
  components: {VueQr},
  props: {},
  data() {
    return {
      radio: "账户余额",
      checked: false,
      fukuan: [{ text: "账户余额" }, { text: "支付宝" }, { text: "微信" }],
      z_money: 0,
      orderId: '',
      showQr: false,
      qrTitle: '',
      payUrl: '',
      zfbOrderId: '',
      wxOrderNo: ''
    };
  },
    mounted() {
        // 一天的金额
        let money = this.$store.state.carinfo.price;
        // 开始时间
        let stime = this.$store.state.startime_;
        // 结束时间
        let etime = this.$store.state.endtime_;
        // 租车时长
        let time = (etime - stime) / 24 / 60 / 60 / 1000;
        this.z_money = (money - 0) * time;
    },
  methods: {
    fukuantotongzhi() {
      // "2020-11-26 08:18:55 "
      let stime = this.$store.state.startime_;
      let etime = this.$store.state.endtime_;
      let new_stime = stime.getFullYear()+"-"+(stime.getMonth()+1)+"-"+stime.getDate()+" "+new Date().getHours()+":"
                      +new Date().getMinutes()+":"+
                      new Date().getSeconds();
      let new_etime = etime.getFullYear()+"-"+(etime.getMonth()+1)+"-"+etime.getDate()+" "+new Date().getHours()+":"
                      +new Date().getMinutes()+":"+
                      new Date().getSeconds();
      // 判断账户的余额和需要支付的金额是否相同
      if (this.radio == "账户余额") {
          if(this.z_money>this.$store.state.user.accountBalance){
              Notify({ type: 'danger', message: '余额不足请充值' });
              this.$router.push('/wallet')
          }else{
              // 下订单
              placeOrder({
                  // 汽车id
                  carId: this.$store.state.carinfo.id,
                  // 客户id
                  clientId: this.$store.state.user.id,
                  // 开始时间
                  subscribePickTime: new_stime,
                  // 换车时间
                  subscribeReturnTime: new_etime,
                  // 取车门店
                  pickStore: this.$store.state.shopname,
                  // 换车门店
                  returnStore: this.$store.state.shopname,
              }).then( result => {
                  if (result.code == 200) {
                      this.orderId = result.listData[0];
                      this.$store.state.orderNumber = result.listData[1];
                      this.$toast.success("下单成功");
                      // 支付订单
                      paymentOrder({
                          // 客户id
                          clientId: this.$store.state.user.id,
                          // 订单id
                          orderId: this.orderId,
                          // 订单价格
                          originalPrice: this.z_money,
                          // 订单价格
                          paidAmount: this.z_money,
                          // 支付方式
                          paymentMethod : this.radio
                      }).then( res => {
                          if ( res.code == 200) {
                              this.$router.push('/dingdantongzhi')
                          }
                      });
                  } else {
                      this.$toast.fail("下单失败")
                  }
              });
          }
      }
      if (this.radio == "支付宝") {
          this.qrTitle = this.radio+'支付二维码';
          // 根据支付金额，弹出支付宝的二维码
          alipay({
              orderMoney: this.z_money,
          }).then( result => {
              this.payUrl = result.listData[0];
              this.zfbOrderId = result.listData[1];
              this.showQr = true;
          });
          // 先进行下订单
          placeOrder({
              // 汽车id
              carId: this.$store.state.carinfo.id,
              // 客户id
              clientId: this.$store.state.user.id,
              // 开始时间
              subscribePickTime: new_stime,
              // 换车时间
              subscribeReturnTime: new_etime,
              // 取车门店
              pickStore: this.$store.state.shopname,
              // 换车门店
              returnStore: this.$store.state.shopname,
          }).then( result => {
              if (result.code == 200) {
                  this.orderId = result.listData[0];
                  this.$store.state.orderNumber = result.listData[1];
                  this.$toast.success("下单成功");
              } else {
                  this.$toast.fail("下单失败")
              }
          });
          // 开启定时器，定时扫描支付结果
          this.getStatus = setInterval( ()=> {
              getAliPayStatus({
                  orderId : this.zfbOrderId
              }).then( result => {
                  if (result.code == 200) {
                      // 支付成功之后，支付订单
                      // 支付订单
                      paymentOrder({
                          // 客户id
                          clientId: this.$store.state.user.id,
                          // 订单id
                          orderId: this.orderId,
                          // 订单价格
                          originalPrice: this.z_money,
                          // 支付价格
                          paidAmount: this.z_money,
                          // 支付方式
                          paymentMethod : this.radio
                      }).then( res => {
                          if ( res.code == 200) {
                              clearInterval(this.getStatus);
                              this.$toast.success("支付成功");
                              this.$router.push('/dingdantongzhi')
                          }
                      });
                  }
              })
          },3000);
      }
      if (this.radio == "微信") {
          this.qrTitle = this.radio+'支付二维码';
          // 微信后端固定支付0.01
          weixinpay().then( result => {
              if (result.code == 200) {
                  this.payUrl = result.listData[0];
                  this.wxOrderNo = result.listData[1];
                  this.showQr = true;
              }
          });
          // 先进行下订单
          placeOrder({
              // 汽车id
              carId: this.$store.state.carinfo.id,
              // 客户id
              clientId: this.$store.state.user.id,
              // 开始时间
              subscribePickTime: new_stime,
              // 换车时间
              subscribeReturnTime: new_etime,
              // 取车门店
              pickStore: this.$store.state.shopname,
              // 换车门店
              returnStore: this.$store.state.shopname,
          }).then( result => {
              if (result.code == 200) {
                  this.orderId = result.listData[0];
                  this.$store.state.orderNumber = result.listData[1];
                  this.$toast.success("下单成功");
              } else {
                  this.$toast.fail("下单失败")
              }
          });
          // 开启定时器，定时扫描微信支付结果
          this.weixinGetStatus = setInterval( ()=> {
              getWeiXinPayStatus({
                  orderNo : this.wxOrderNo
              }).then( result => {
                  if (result.code == 200) {
                      // 支付成功之后，支付订单
                      // 支付订单
                      paymentOrder({
                          // 客户id
                          clientId: this.$store.state.user.id,
                          // 订单id
                          orderId: this.orderId,
                          // 订单价格
                          originalPrice: this.z_money,
                          // 支付价格
                          paidAmount: this.z_money,
                          // 支付方式
                          paymentMethod : this.radio
                      }).then( res => {
                          if ( res.code == 200) {
                              clearInterval(this.weixinGetStatus);
                              this.$toast.success("支付成功");
                              this.$router.push('/dingdantongzhi')
                          }
                      });
                  }
              })
          },3000);
      }
    },
  }
};
</script>

<style scoped lang="less">
.dingjin {
  width: 100%;
  margin-top: 0.05rem;
  font-size: 0;
  .yingfu {
    width: 95%;
    height: 0.73rem;
    margin: 0 auto;
    border-radius: 0.08rem;
    background: white;
    line-height: 0.73rem;
    padding-left: 0.15rem;
    span {
      font-size: 0.25rem;
      font-weight: 600;
    }
    span:last-child {
      color: #f0230e;
    }
  }
  .fuzhang {
    width: 95%;
    height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-top: 0.25rem;
    position: relative;
    li {
      flex: 1;
      display: flex;
      align-items: center;
      img {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 0.08rem;
      }
      span {
        font-size: 0.26rem;
        margin-left: 0.26rem;
        font-weight: 600;
      }
    }
  }
  .tongyi_yuedu {
    width: 95%;
    margin: 0.27rem auto 0.6rem auto;
    display: flex;
    align-items: center;
    span:nth-child(2) {
      font-size: 0.22rem;
      color: #666;
      margin-left: 0.2rem;
    }
    span:last-child {
      font-size: 0.23rem;
      color: #4395ff;
      margin-left: 0.29rem;
    }
  }
  .buton_botom {
    width: 100%;
    height: 0.81rem;
    background: #4395ff;
    color: white;
    font-size: 0.29rem;
  }
}
</style>
